<!--添加标记点-->
<template>
	<view>

		<!-- <Head :title="formData.status == '待核实' ? '事件核实反馈' : '事件处置反馈'"></Head> -->
		<view class="check-content" v-if="!imageUrl">
			<view  class="pointer-name">检测点名称</view>
			<uni-forms ref="form" size="mini" :model="formData" :rules="rules">
				<view class=""
					style="width: 100%!important;display: flex;justify-content: space-between;flex-wrap: wrap;">
					<view class="" style="width: 50%;padding-left: 10rpx;box-sizing: border-box;">
						<uni-forms-item label="装置名称" :label-width="70" name="floor"
							:rules="[{required: false,errorMessage: '请输入装置名称'}]">
							<view class="" style="width: 100%!important;">
							<!-- 	<hpy-form-select style="padding: 0px!important;width: 100%;" v-model="formData.floor"
									mode="selector" title="请选择楼层" @change="pointFloorSelectChange"
									:dataList="floors"></hpy-form-select> -->
									<input v-model="selector" :maxlength="50" style="border:1px solid #ededed;height: 32px;border-radius: 4px;padding-left: 10px;" placeholder="请输入"/>
							</view>
						</uni-forms-item>
					</view>

					<view class="" style="width: 50%;padding-left: 10rpx;box-sizing: border-box;">
						<uni-forms-item label="装置编号" :label-width="70" name="pointAreaSelect"
							:rules="[{required: false,errorMessage: '请输入装置编号'}]">
							<view class="" style="width: 100%!important;">
								<input v-model="selector" :maxlength="50" style="border:1px solid #ededed;height: 32px;border-radius: 4px;padding-left: 10px;" placeholder="请输入"/>
								<!-- <hpy-form-select v-model="formData.pointAreaSelect" mode="selector" title="请选择位置"
									:dataList="areas" @change="pointAreaSelectChange"></hpy-form-select> -->
							</view>
						</uni-forms-item>
					</view>


					<view class="" style="width: 50%;padding-left: 10rpx;box-sizing: border-box;">
						<uni-forms-item label="区域名称" :label-width="70"  name="pointRealSelect"
							:rules="[{required: false,errorMessage: '请输入区域名称'}]">
							<view class="" style="width: 100%!important;">
								<input v-model="selector" :maxlength="50" style="border:1px solid #ededed;height: 32px;border-radius: 4px;padding-left: 10px;" placeholder="请输入"/>
							<!-- 	<hpy-form-select v-model="formData.pointRealSelect" mode="selector"
									@change="pointRealSelectChange" title="请选择点位" :dataList="points"></hpy-form-select> -->
							</view>
						</uni-forms-item>
					</view>



					<view class="" style="width: 50%;padding-left: 10rpx;box-sizing: border-box;">
						<uni-forms-item label="区域编号" :label-width="70" name="pointTypeSelect"
							:rules="[{required: false,errorMessage: '请输入区域编号'}]">
							<view class="" style="width: 100%!important;">
								<input v-model="selector" :maxlength="50" style="border:1px solid #ededed;height: 32px;border-radius: 4px;padding-left: 10px;" placeholder="请输入"/>
							<!-- 	<hpy-form-select v-model="formData.pointTypeSelect" mode="selector" title="请选择类型"
									:dataList="types" @change="pointTypeSelectChange"></hpy-form-select> -->
							</view>
						</uni-forms-item>
					</view>

					<view class="" style="width: 100%;">
						<uni-forms-item label="设备名称" :label-width="70" name="inspectDate"
							:rules="[{required: false,errorMessage: '请输入设备名称'}]">
							<view class="" style="width: 100%!important;">
								<input v-model="selector" :maxlength="100" style="border:1px solid #ededed;height: 32px;border-radius: 4px;padding-left: 10px;" placeholder="请输入"/>
							</view>
							<!-- <view @click="showDateStyler=true" class="inspectDateView" style="    border: 1px solid #e5e5e5;  
								border-radius: 5px;line-height: 1.875rem; padding: 0 5px;display: flex;justify-content:
								space-between;">
								<view>{{formData.inspectDate}}</view>
								<view class="">
									<uni-icons type="bottom" size="20"></uni-icons>
								</view>
							</view> -->
						</uni-forms-item>
					</view>

					<view class="" style="width: 100%;">
						<uni-forms-item label="工艺描述" :label-width="75" name="problemDesc" required
							:rules="[{required: true,errorMessage: '请输入工艺描述'}]">
							<textarea v-model="formData.problemDesc"
								style="padding: 10rpx;width: 95%;border: 1px solid #ededed;" placeholder="请输入"></textarea>
						</uni-forms-item>
					</view>

				</view>

				<uni-forms-item label="楼层" :label-width="70" name="content">
					<!-- <uni-image :src="item.link" v-for="item in formData.attachList" :key="item.id" class="img-list"></uni-image> -->
				<!-- 	<uni-file-picker v-model="formData.attachList" file-mediatype="image" @select="select" :limit="5"
						:sourceType="['album', 'camera']" @progress="progress" @success="success" @fail="fail"
						@delete="deleteFileFn">

					</uni-file-picker> -->
					<hpy-form-select style="padding: 0px!important;width: 100%;" v-model="formData.floor"
							mode="selector" title="请选择楼层" @change="pointFloorSelectChange"
							:dataList="floors"></hpy-form-select>
				</uni-forms-item>
				<uni-forms-item label="方向" :label-width="70" name="content">
					<hpy-form-select style="padding: 0px!important;width: 100%;" v-model="formData.floor"
							mode="selector" title="请选择方向" @change="pointFloorSelectChange"
							:dataList="directionList"></hpy-form-select>
					<!-- <uni-image :src="item.link" v-for="item in formData.attachList" :key="item.id" class="img-list"></uni-image> -->
				<!-- 	<uni-file-picker v-model="formData.attachList" file-mediatype="image" @select="select" :limit="5"
						:sourceType="['album', 'camera']" @progress="progress" @success="success" @fail="fail"
						@delete="deleteFileFn">
				
					</uni-file-picker> -->
				</uni-forms-item>
				
				<uni-forms-item label="距离" :label-width="70" name="content">
						<view class="" style="padding-top:20rpx;
						padding-left:20rpx;">
							<!-- max、min不传默认 0-100 -->
							<sliderBar max='100' min='0.1' @change='change'></sliderBar>
						</view>
				</uni-forms-item>
				<uni-forms-item label="群组编号" :label-width="70" name="content">
						<view style="width: 100%!important;">
						<input v-model="selector" :maxlength="100" style="border:1px solid #ededed;height: 32px;border-radius: 4px;padding-left: 10px;" placeholder="请输入"/>
						</view>
				</uni-forms-item>
			</uni-forms>
		</view>
		<!-- 拍照后显示图片 -->
		<view v-if="imageUrl" style="width:200rpx;
		height:400rpx;background-color: red;">
		<image  :src="imageUrl" :key="index" mode="aspectFit"></image>
		</view>
		<view class="check-button">
			<button type="primary" class="mini-btn" @tap="takePhotos">拍照</button>
		</view>
         
	</view>


	<!-- <lekeDatetimeStyler :value="formData.inspectDate" :visible="showDateStyler" :model="model"
		@cancel="handShowDateCancel" @confirm="handShowDateConfirm"></lekeDatetimeStyler> -->

</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app';
	// import Head from '@/components/head/head.vue'
	import SliderBar from './sliderBar.vue'
	import {
		getDictBiz,
		getSysDictBiz,
		submitPatrol,
		getPatrolDetail,
	} from "@/api/patrol.js"
	const formData = ref({
		reportUser: '',
		createUser: '',
		problemImgAttachList: [],

		attachList: [],
		roblemImgAttachIds: '',
		problemFloor: '',
		esultStatus: '',

		pointAreaSelect: {},
		pointAreaName: '',
		pointArea: '',

		pointTypeSelect: {},
		pointTypeName: '',
		pointType: '',

		pointRealSelect: {},
		pointRealName: '',
		pointName: '',

		inspectDate: '',


	})
	const showFlag = ref(true); // 显示图片还是表单标志位
	const status = ref([]);
	const floors = ref([]);

	const points = ref([]);
	const pointsDic = ref([]);
	const areas = ref([]);
	const types = ref([]);
    const directionList = ref([]);
	const imageUrl = ref ("");

	function dateFormat(date, format) {
		format = format || 'yyyy-MM-dd hh:mm:ss';
		if (date !== 'Invalid Date') {
			let o = {
				'M+': date.getMonth() + 1, //month
				'd+': date.getDate(), //day
				'H+': date.getHours(), //hour
				'm+': date.getMinutes(), //minute
				's+': date.getSeconds(), //second
				'q+': Math.floor((date.getMonth() + 3) / 3), //quarter
				S: date.getMilliseconds(), //millisecond
			};
			if (/(y+)/.test(format))
				format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
			for (let k in o)
				if (new RegExp('(' + k + ')').test(format))
					format = format.replace(
						RegExp.$1,
						RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
					);
			return format;
		}
		return '';
	}


	//时间日期插件
	import lekeDatetimeStyler from '@/components/leke-datetime-styler/leke-datetime-styler.vue'

	const showDateStyler = ref(false)

	const model = ['year', 'month', 'day', 'hour', 'minute', 'second']

	// 确认选择回调
	const handShowDateConfirm = (e) => {
		showDateStyler.value = false
		formData.value.inspectDate = e
		console.log('回调时间===>', e)
	}

	// 取消选择回调
	const handShowDateCancel = () => {
		showDateStyler.value = false
		console.log('取消===>')
	}

	//点位
	getDictBiz('point_name').then(res => {
		points.value = handleDictData(res.data || []);
	})

	//区域
	getDictBiz('point_area').then(res => {
		areas.value = handleDictData(res.data || []);
	})

	const pointAreaSelectChange = (e) => {
		formData.value.pointAreaName = e.value.text;
		formData.value.pointArea = e.value.value;


	}

	//类型
	getDictBiz('point_type').then(res => {
		types.value = handleDictData(res.data || []);
	})

	const pointTypeSelectChange = (e) => {
		formData.value.pointTypeName = e.value.text;
		formData.value.pointType = e.value.value;

	}

	const pointRealSelectChange = (e) => {
		formData.value.pointRealName = e.value.text;
		formData.value.pointName = e.value.value;
	}


	//楼层
	getDictBiz('floor').then(res => {
		floors.value = handleDictData(res.data || []);
	})


	const pointFloorSelectChange = (e) => {
		// formData.value.pointRealName = e.value.text;
		formData.value.problemFloor = e.value.value;
	}


	const handleDictData = (list, key, dictKey) => {
		let arr = []
		list.map(v => {
			let item = {
				text: v.dictValue,
				value: v.dictKey
			};
			if (formData.value[key] == v.dictKey) {
				formData.value[dictKey] = item;
			}
			arr.push(item)
		})
		return arr;
	}


	const form = ref(null)

	const imgList = ref([])

	const deleteFileFn = (info) => {
		const idx = info.index == 0 ? 0 : info.index + 1;
		imgList.value.splice(idx);
		// formData.value.attachList.splice(idx);
		console.log('delete==')
	}
	//开始拍照
	const takePhotos=() =>{
		uni.chooseImage({
			count: 6, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['camera'], //打开相机
			success: function (res) {
				console.log("pppppp",JSON.stringify(res.tempFilePaths));
				imageUrl.value =res.tempFilePaths[0]
				
			}
		});
	}
	
	// 提交
	const submit = () => {
		form.value.validate().then(res => {
			doSubmit();
		}).catch(err => {
			console.log('表单错误信息：', err);
		})

	}

	const doSubmit = () => {
		const userInfo = uni.getStorageSync('userInfo') || {};
		formData.value.createUser = userInfo.userId
		formData.value.reportUser = userInfo.name
		formData.value.problemImgAttachList = imgList.value;
		let arr = []

		imgList.value.forEach(item => {
			arr.push(item.attachId)
		})

		formData.value.problemImgAttachIds = arr.toString()


		if (formData.value.inspectDate == '') {
			formData.value.inspectDate = dateFormat(new Date(), 'yyyy-MM-dd HH:mm:ss')
		}
		let params = JSON.parse(JSON.stringify(formData.value));

		console.log('params', params)
		submitPatrol(formData.value).then(res => {
			uni.showToast({
				icon: 'none',
				title: "提交成功！"
			})
			setTimeout(function() {
				uni.navigateBack()
			}, 1000)
		})
	}
	const select = (e) => {
		let that = this
		uni.showLoading({
			title: "图片上传中"
		});
		const tempFilePaths = e.tempFilePaths;
		for (var i in tempFilePaths) { //多文件
			uni.uploadFile({
				// url: '/app/blade-resource/oss/endpoint/put-file-attach', //上传接口
				url: '/app/blade-resource/oss/endpoint/put-file-without-login', //上传接口
				filePath: tempFilePaths[i],
				name: 'file',
				header: {
					Authorization: 'Basic c2FiZXI6c2FiZXJfc2VjcmV0',
					'Blade-Auth': 'bearer ' + uni.getStorageSync('token')
				},
				success: (uploadFileRes) => {
					uni.hideLoading();
					try {
						const back = JSON.parse(uploadFileRes.data);
						// if (uploadFileRes.statusCode == 200) {
						// 	that.infos.pathList.push(back.data);
						// } else {
						// 	uni.showToast(back.msg)
						// }
						// for (const item of back.data) {
						back.data['id'] = back.data.attachId
						imgList.value.push(back.data)
						console.log('上传成功', imgList)
						// formData.value.attachList.push(back.data);
					} catch (e) {}
					// }
				},
				fail: () => {
					uni.hideLoading();
					uni.showToast("图片上传失败，请联系开发！")
				},
				complete: function() {
					uni.hideLoading();
				}
			});
		}

	}

	// 获取上传进度
	const progress = (e) => {
		console.log('上传进度：', e)
	}

	// 上传成功
	const success = (e) => {
		console.log('上传成功')
	}

	// 上传失败
	const fail = (e) => {
		console.log('上传失败：', e)
	}
	//距离变化函数
	const change = () =>{
		
	}
</script>

<style lang="scss" scoped>
	.select-item {
		width: 100rpx !important;
	}

	.content {
		display: flex;
		flex-wrap: wrap;
		max-width: 100%;
	}

	.check-content {
		// height: calc(100vh - 330rpx);
		overflow: auto;
		margin: 26rpx 31rpx 0;
		padding: 26rpx 26rpx 80rpx;
		background: #FFFFFF;
		box-shadow: 0px 3rpx 10rpx 0px rgba(0, 0, 0, 0.1);
		border-radius: 5rpx;
	}

	.check-button {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 25rpx 82rpx;
		background: white;
		z-index: 2;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		background: rgba(255, 255, 255, 0.6);

		uni-button {
			line-height: 80rpx !important;
			font-size: 26rpx;
		}
	}

	.item-inline {
		display: flex;
		margin-bottom: 22px;

		view:nth-child(1) {
			font-size: 14px;
			color: #606266;
			min-width: 80px;
		}

	}
	.pointer-name{
		//padding-left:20rpx;
		margin-bottom: 20rpx;
		//border-bottom: solid 1rpx  #606266 ;
		font-weight: bold;
		color:#606266;
	}
	uni-input{
		font-size: 12px !important;
	}
	uni-textarea{
		height:100rpx;
		font-size: 12px !important;
	}
</style>
<style lang="scss">
	.check-content {
		.uni-data-checklist .checklist-group .checklist-box.is--tag.is-checked {
			background: linear-gradient(0deg, #455BDF 0%, #5970FA 100%);
			width: 21%;
			height: 80rpx;
			text-align: center;

			.checklist-text {
				color: #fff;
			}
		}

		.uni-data-checklist .checklist-group .checklist-box.is--tag {
			width: 21%;
			height: 80rpx;
			background: #FFFFFF;
			border: 1rpx solid #455BDF;
			border-radius: 10rpx;
		}

		.uni-data-checklist .checklist-group .checklist-box .checklist-content {
			justify-content: center;
		}

		.uni-data-checklist .checklist-group .checklist-box.is--tag .checklist-text {
			color: #455BDF;
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
		}

		.uni-forms-item__label {
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #1B1D20;
			padding: 0px !important;
		}

		.uni-textarea-textarea {
			font-size: 28rpx;
		}

		.uni-forms-item .is-required {
			margin-right: 10rpx;
		}
	}

	.item-inline {
		// flex-direction: row !important;
		align-items: center !important;

		.uni-forms-item__label {
			flex-basis: 200px !important;
			// min-width: 200px !important;
		}

		.uni-forms-item__content {
			padding-left: 20px;
		}
	}

	.img-list {
		margin: 1%;
		width: 30%;
		height: 28%;
		padding-top: 30%;
		border: 3rpx solid rgb(238, 238, 238);
	}
</style>